<?
$link = mysqli_connect("localhost:3306", "Julan", "123456"); //数据库端口的连接
mysqli_select_db($link, "myhometown"); //连接数据库
mysqli_query($link, "set name 'utf-8'"); //查询语句设置字符集
$str = "select * from 景点";  //查询语句
$result = mysqli_query($link, $str);
$arr = array();
while ($row = mysqli_fetch_array($result)) {
    $arr[] = $row;
}
?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=05uTleVqv541kfz8c9zG11Yom8qVRaQj"></script>
    <title>著名景点</title>
    <style>
        #map_container {
            overflow: hidden;
            width: 100%;
            height: 600px;
            margin: 2%;
            font-family: "微软雅黑";
        }
    </style>
</head>

<body>
    <div id="map_container"></div>
</body>

</html>
<script>
    var map = new BMapGL.Map('map_container'); // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(110.78, 32.65), 9); // 初始化地图,设置中心点坐标和地图级别
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    /*
    // 创建添加点标记
    var marker1 = new BMapGL.Marker(new BMapGL.Point(111, 32));
    // 在地图上添加点标记
    map.addOverlay(marker1);
    // 创建图文信息窗口
    var sContent = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>汉韵阁</h4>"
				+ "<img style='float:right;margin:4px' id='imgDemo' src='img/景点/武当山 [原始大小].jpg' width='139' height='104' title='汉韵阁'/>"
				+ "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>汉韵阁坐落于西安软件园...</p>"
				+ "</div>";
    var infoWindow = new BMapGL.InfoWindow(sContent);
    // marker添加点击事件
    marker1.addEventListener('click', function() {
        this.openInfoWindow(infoWindow);
        // 图片加载完毕重绘infoWindow
        document.getElementById('imgDemo').onload = function() {
            infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
        };
    });
    */

    //对应不同的Marker创建不同的InfoWindow
    function createInfoWindow(sContent, markername) {
        //var sContent =;
        var infoWindow = new BMapGL.InfoWindow(sContent);
        // marker添加点击事件
        markername.addEventListener('click', function() {
            this.openInfoWindow(infoWindow);
        });
    }

    <?php foreach ($arr as $key => $value) { ?>
        
        // 创建添加点标记
        var point = new BMapGL.Point(<?php echo $value['Longitude']; ?>, <?php echo $value['Latitude']; ?>);
        var marker = new BMapGL.Marker(point);
        // 在地图上添加点标记
        map.addOverlay(marker);
        // 创建图文信息窗口
        var sContent = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + '<?php echo $value['attraction_name']; ?>' + "</h4>" +
            "<img style='float:right;margin:4px' id='imgDemo' src='" + '<?php echo $value['image_path']; ?>' + "' width='139' height='104' alt='" +
            '<?php echo $value['attraction_name']; ?>' + "'/><p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + '<?php echo $value['Introduction']; ?>' +
            "</p></div>";

        createInfoWindow(sContent, marker);
    <?php } ?>
</script>